<template>
	<view class="backcard">
		<view class="backcard-main">
			<view class="backcard-main-li" :class="[{back1 : item.bankName == '招商银行'},{back2 : item.bankName == '邮政银行'}]" v-for="(item, index) of list" :key="index">
				<view class="backcard-main-li-top-allleft" @click="cli_li(item)">
				<view class="backcard-main-li-top">
					<view class="backcard-main-li-top-left">
						<image class="backcard-main-li-top-left-img" :src=item.bankLog mode=""></image>
					</view>
					<view class="backcard-main-li-top-cen">
						<view class="backcard-main-li-top-cen-one">
							{{item.bankName}}
						</view>
						<view class="backcard-main-li-top-cen-two">
							储蓄卡
						</view>
					</view>
					
				</view>
				<view class="bankcard-code">
					<text>••••</text><text>••••</text><text>••••</text>{{item.cardNo | cardSlice}}
				</view>
				</view>
				<view class="backcard-main-li-top-right" @click="cli_close(item)">
					<image class="backcard-main-li-top-right-img"
						src="../../../static/manufacturers/close_white.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="backcard-btn font_blod" @click="cli_goadd">
			添加银行卡
		</view>
		<uni-popup ref="popup">
			<view class="pop-box">
				<view class="pop-box-top font_blod">
					确定删除银行卡？
				</view>
				<view class="pop-box-btm">
					<view class="pop-box-btm-left" @click="cli_qx">
						取消
					</view>
					<view class="pop-box-btm-right" @click="cli_ok">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	import {eventBus } from '../../../main.js'
	export default {
		data() {
			return {
				factoryId: uni.getStorageSync('id_factory'),
				list: [],
				id: '',
			}
		},
		onShow() {
			this.getFactoryBankCards()
		},
		mounted() {
			
		},
		methods: {
			// 跳转到添加银行卡
			cli_goadd () {
				uni.navigateTo({
					url: '/pages/manufacturers/bankvcard_add/bankvcard_add'
				})
			},
			// 点击选择银行卡
			cli_li (item) {
				console.log(item);
				eventBus.$emit('cardNo', item.cardNo)
				eventBus.$emit('cardName', item.cardName)
				eventBus.$emit('bankName', item.bankName)
				eventBus.$emit('bankLog', item.bankLog)
				// uni.redirectTo({
				// 	url: `/pages/manufacturers/deliver/deliver?bankNam${item.bankName}&cardName=${item.cardName}&cardNo=${item.cardNo}`
				// })
				uni.navigateBack()
			},
			// 点击删除
			cli_close(item) {
				this.id = item.id
				this.$refs.popup.open()
			},
			cli_qx () {
				this.$refs.popup.close()
			},
			cli_ok () {
				this.deleteFactoryBankCards()
			},
			// 删除厂家银行账户
			deleteFactoryBankCards (id) {
				uni.request({
					url: allapi.deleteFactoryBankCards,
					data: {
						id: this.id
					},
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						this.$refs.popup.close()
						this.getFactoryBankCards()
					}
				})
			},
			// 获取列表
			getFactoryBankCards() {
				uni.request({
					url: allapi.getFactoryBankCards,
					data: {
						factoryId: this.factoryId
					},
					success: (res) => {
						console.log(res);
						this.list = res.data.data
					}
				})
			},
		},
		filters:{
			cardSlice(val){
				console.log('val',val)
				return val.slice(-4)
			}
		},
	}
</script>

<style scoped lang="less">
	.backcard {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
	}

	.backcard-main {
		flex: 1;
		margin: 0 34rpx;
		overflow: auto;
	}

	.backcard-main-li {
		margin-bottom: 24rpx;
		/* height: 176rpx; */
		background: linear-gradient(90deg, #4588CD 0%, #355EB0 100%);
		border-radius: 24rpx;
		padding: 32rpx 38rpx;
		position: relative;
		display: flex;
		&:nth-of-type(3n+1){
			background: linear-gradient(90deg, #4588CD 0%, #355EB0 100%);
		}
		&:nth-of-type(3n+2){
			background: linear-gradient(90deg, #DF6067 0%, #CC5B60 100%);
		}
		&:nth-of-type(3n+3){
			background: linear-gradient(90deg, #06A7AD 0%, #0490AE 100%);
		}
	}
	.back1 {
		background: linear-gradient(90deg, #DF6067 0%, #CC5B60 100%);
	}
	.back2 {
		background: linear-gradient(90deg, #06A7AD 0%, #0490AE 100%);
	}
	.backcard-main-li-top {
		display: flex;
	}

	.backcard-main-li-top-left-img {
		width: 72rpx;
		height: 72rpx;
	}

	.backcard-main-li-top-cen {
		flex: 1;
		margin: 0 18rpx;
	}

	.backcard-main-li-top-cen-one {
		font-size: 36rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 50rpx;
	}

	.backcard-main-li-top-cen-two {
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 6rpx;
	}
	.backcard-main-li-top-allleft {
		flex: 1;
	}
	.backcard-main-li-top-right {
		margin-top: -16rpx;
		position: absolute;
		right: 20rpx;
	}

	.backcard-main-li-top-right-img {
		width: 32rpx;
		height: 32rpx;
	}

	.bankcard-code {
		margin-top: 60rpx;
		margin-left: 90rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.bankcard-code text{
		margin-right: 24rpx;
		letter-spacing: 2rpx;
	}

	.backcard-btn {
		margin: 40rpx;
		height: 92rpx;
		line-height: 92rpx;
		background: #5DD4D6;
		border-radius: 46rpx;
		text-align: center;
		font-size: 36rpx;
		color: #FFFFFF;
		margin-bottom: env(safe-area-inset-bottom);
	}

	.pop-box {
		width: 534rpx;
		height: 280rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
	}

	.pop-box-top {
		flex: 1;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		color: #353535;
	}

	.pop-box-btm {
		height: 110rpx;
		line-height: 110rpx;
		display: flex;
		text-align: center;
		font-size: 34rpx;
		color: #000000;
	}

	.pop-box-btm-left {
		flex-grow: 1;
		border-right: 1rpx solid #eeeeee;
	}

	.pop-box-btm-right {
		flex-grow: 1;
		color: #5DD4D6;
	}
</style>
